<template>
	<view>
		<u-navbar :is-back="false" :border-bottom="false" :background="{ background: '#fff' }">
			<view class="slot-wrap flex align-center">
				<text class="cuIcon-back" @click="Back"></text>
				我的订单
			</view>
		</u-navbar>
		<view class="container-box">
			<!-- #ifdef H5 -->
			<u-sticky index='1' :offset-top="0" :enable="enable">
			<!-- #endif -->
			<!-- #ifndef  H5 -->
			<u-sticky index='1' :offset-top="offsetTop" h5-nav-height="44" :enable="enable">
			<!-- #endif -->
				<view class="">
					<view class="mian-navigationBar">
						<view :class="bar==i?'color-green':''" v-for="(item,i) in navigationBar" :key="i"
							@tap="navigationBars(i)">{{item}}</view>
					</view>
				</view>
			</u-sticky>
			<u-gap height="20"></u-gap>
			<view class="main">
				<view class="main-top">
					<view>订单号：2015422021255441122</view>
					<view class="grey">已完成</view>
				</view>
				<view class="main-content" @click="multiRedirect('/pages/orederList/orderDetails')">
					<view class="main-content-img">
						<view class="main-content-img-top flex">
							<image src="../../static/images/banren.png" mode="aspectFill"></image>
							<view class="xingxi">
								<view class="flex justify-between">
									<view class="name">中华墨坊课中华墨坊课程介绍中华墨坊课程介绍程介绍</view>
									<view class="price text-bold text-orange">
										￥<text>298.00</text>
									</view>
								</view>
								<view class="text-orange">
									<view class="time">下单时间：2021/03/01-2021/03/20</view>
									<view class="time">支付时间：2021/03/01-2021/03/20</view>
								</view>
							</view>
						</view>
					</view>
					<view class="main-content-img">
						<view class="main-content-img-top flex">
							<image src="../../static/images/banren.png" mode="aspectFill"></image>
							<view class="xingxi">
								<view class="flex justify-between">
									<view class="name">中华墨坊课中华墨坊课程介绍中华墨坊课程介绍程介绍</view>
									<view class="price text-bold text-orange">
										￥<text>298.00</text>
									</view>
								</view>
								<view class="text-orange">
									<view class="time">下单时间：2021/03/01-2021/03/20</view>
									<view class="time">支付时间：2021/03/01-2021/03/20</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="main-bottom">
					<view class="flex align-center">
						<button class="cu-btn" open-type="contact">咨询客服</button>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="main-top">
					<view>订单号：2015422021255441122</view>
					<view class="grey">待支付</view>
				</view>
				<view class="main-content" @click="multiRedirect('/pages/orederList/orderDetails')">
					<view class="main-content-img">
						<view class="main-content-img-top flex">
							<image src="../../static/images/banren.png" mode="aspectFill"></image>
							<view class="xingxi">
								<view class="flex justify-between">
									<view class="name">中华墨坊课中华墨坊课程介绍中华墨坊课程介绍程介绍</view>
									<view class="price text-bold text-orange">
										￥<text>298.00</text>
									</view>
								</view>
								<view class="text-orange">
									<view class="time">下单时间：2021/03/01-2021/03/20</view>
									<view class="time">支付时间：2021/03/01-2021/03/20</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="main-bottom">
					<view class="flex align-center">
						<button class="cu-btn">去支付</button>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="main-top">
					<view>订单号：2015422021255441122</view>
					<view class="grey">待发货</view>
				</view>
				<view class="main-content" @click="multiRedirect('/pages/orederList/orderDetails')">
					<view class="main-content-img">
						<view class="main-content-img-top flex">
							<image src="../../static/images/banren.png" mode="aspectFill"></image>
							<view class="xingxi">
								<view class="flex justify-between">
									<view class="name">中华墨坊课中华墨坊课程介绍中华墨坊课程介绍程介绍</view>
									<view class="price text-bold text-orange">
										￥<text>298.00</text>
									</view>
								</view>
								<view class="text-orange">
									<view class="time">下单时间：2021/03/01-2021/03/20</view>
									<view class="time">支付时间：2021/03/01-2021/03/20</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="main-bottom">
					<view class="flex align-center">
						<button class="cu-btn">确认完成</button>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				enable: true,
				offsetTop: 0,
				
				navigationBar: ['全部', '待付款', '待发货', '待收货', '已完成'],
				bar: 0,
			};
		},
		// 在对应的show和hide页面生命周期中打开或关闭监听
		onHide() {
			this.enable = false
		},
		onShow() {
			this.enable = true
			this.setOffestTop()
		},
		methods: {
			Back() {
				uni.navigateBack({});
			},
			// 适配吸顶tab高度
			setOffestTop() {
				let systemInfo = uni.getSystemInfoSync()
				let topPx = systemInfo.statusBarHeight + 44 // 顶部状态栏+沉浸式自定义顶部导航
				this.offsetTop = topPx / (uni.upx2px(topPx) / topPx) // px转rpx
				console.log(this.offsetTop)
			},
			navigationBars(index) {
				this.bar = index;
			},
			//页面跳转
			multiRedirect(url) {
				if (url && url.length > 0) {
					console.log('+++++', url.indexOf('http'))
					if (url.indexOf('http') === 0) {
						// #ifdef H5 
						location.href = url
						// #endif
						// #ifdef MP-WEIXIN
						uni.navigateTo({
							url: '/pages/web/web?url=' + encodeURIComponent(url)
						})
						// #endif
						// #ifdef APP-PLUS
						plus.runtime.openURL(url, function(res) {
							console.log(res);
						});
						// #endif
					} else if (url.indexOf('&switch') > -1) {
						url = url.substring(0, url.indexOf('&switch'))
						console.log(3434, url)
						uni.switchTab({
							url: url
						})
					} else {
						console.log("挑起", url)
						uni.navigateTo({
							url
						})
					}
				}
			},
		}
	};
</script>

<style lang="scss">
	.time-text {
		line-height: 130rpx;
		text-align: center;
		font-size: 36rpx;
		color: #624C47;
		background-color: #EDD1C5;
	}

	.mian-navigationBar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;
		height: 88rpx;
		view {
			font-size: 28rpx;
			padding: 20rpx 15rpx;
			border-bottom: 4rpx #FFFFFF solid;
		}
		.color-green {
			border-bottom: 4rpx #FE7E00 solid;
		}
	}
	.main {
		background-color: #FFFFFF;
		margin-bottom: 16rpx;
	}

	.main-top {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 2rpx #E8E8E8 solid;
		view {
			font-size: 26rpx;
		}
		.grey {
			color: #FE7E00;
		}
		.grey text {
			font-size: 34rpx;
		}
	}
	.main-content-img {
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: column;
		border-bottom: 2rpx #E8E8E8 solid;
		.main-content-img-top {
			width: 100%;
			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				margin-right: 10rpx;
			}
			.xingxi {
				width: 550rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 20rpx 20rpx 0 20rpx;
				padding-right: 0;
			
				.name {
					color: #333333;
					font-size: 26rpx;
					max-width: 350rpx;
					overflow:hidden; //超出的文本隐藏
					text-overflow:ellipsis; //溢出用省略号显示
					white-space:nowrap; //溢出不换行
				}
			
				.price {
					font-size: 24rpx;
					text {
						font-size: 32rpx;
					}
				}
			
				.time {
					margin-bottom: 6rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	.main-bottom {
		display: flex;
		flex-direction: row-reverse;
		padding: 30rpx;
		.cu-btn {
			width: 145rpx;
			height: 55rpx;
			padding: 0;
			background-color: #FE7E00;
			margin-left: 20rpx;
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}
</style>
